<template>
  <div id="root">
    <!-- =============登录============ -->
    <div class="root-top">
      <p style="font-weight:800; font-size: 20px;height: 50px;line-height: 50px;text-align: center;">登录</p>
      <div class="root-img">
        <div class="root-top-login">
          <span @click="changeCom" style="margin-right: 50px;">手机号登录</span>
          <span >密码登录</span>
        </div>
      </div>
      <div class="root-center">
        <div class="root-inp">
          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" :size="formSize"
                    status-icon>
                    <el-form-item prop="username">
                        <el-input class="input-size" v-model="ruleForm.username" placeholder="请输入用户名" />
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input class="input-size" v-model="ruleForm.password" placeholder="请输入6-12非纯数字新密码" />
                    </el-form-item>

                    <!-- <el-form-item prop="regin">
                        <el-input class="input-size" @click="ddd" v-model="ruleForm.regin" placeholder="请输入6位验证码" />
                    </el-form-item> -->
                </el-form>
        </div>
      </div>
    </div>
    <!-- =============登录============ -->

    <!-- =============登录按钮============ -->
    <div class="root-btn">
      <button @click="submit(ruleFormRef)">登录</button>
    </div>
    <!-- =============登录按钮============ -->

    <!-- =============注册============ -->
    <div class="root-font">
      <p>
        还没有账号？
        <span style="text-decoration: none;" @click="changeRouter">去注册</span>
        <p style="color: #808080;float: right;">忘记密码？</p>
      </p>
    </div>
    <!-- =============注册============ -->
  </div>

  <router-view></router-view>
</template>
<script lang="ts" setup>
import { toLogin } from "@/api/productList.js"
import { ref, reactive } from "vue"

import router from "@/router"

const formSize = ref("default")
const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
    username: "",
    // regin: "",
    password: "",
})

const rules = reactive<FormRules>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { max: 11,  message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { max: 12, message: '请输入6-12位数字与字符组成的密码', trigger: 'blur' },
    ],
    regin: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { min: 6, max: 6, message: '验证码格式不对', trigger: 'blur' },
    ],
})

let changeRouter = () =>{
  router.push("/register")
}

const submit = async (formEl) => {
    await formEl.validate((valid, fields) => {
        if (valid) {
            // 验证成功
            // console.log(valid)
            // console.log(ruleForm);
            toLogin(ruleForm).then(res => {  
            console.log(res);
            if(res == "登录成功"){
              router.push("/home")
            }
          })
        }else{
          return false
        }
    })
}
</script>
<style lang="scss">
#root{
  margin: auto;
  .root-top{
    .root-img{
      padding: 20% 42px 0;
      background-image: url("https://sta.doumistatic.com/src/image/jianzhi/mobile/banner/banner_account.png");
      background-size: cover;
    }
    .root-top-login{
      display: flex;
      justify-content: space-evenly;
      margin-top: -30px;
    }
    .root-inp{
      margin: 20px;
      .el-input__wrapper{
            box-shadow: 0 0 0 0;
            height: 40px;
        }
      .inp3{
        background-image: url("https://m.doumi.com/api/v1/client/showCkCode?rand=0.04660600739477294");
        background-repeat:no-repeat;
        background-position: 100%;
      }
    }
  }
  .root-btn{
    margin: 20px;
    button{
      padding: 15px;
      border-radius: 4px;
      border: 0;
      width: 100%;
      background-color: #ffcc00;
    }
  }
  .root-font{
    margin: 20px;
    margin-top: 20px;
    p{
      font-size: 12px;
    }
    span{
      color: blue;
    }
  }
}
</style>
